<template>
	<!-- 提现 -->
	<div class="with-main">
		<ul>
			<li v-if="listArr">
				<h2>{{ listArr.bankName }}</h2>
				<h3>{{ viewCard(listArr.bankNumber) }}</h3>
			</li>
			<li class="act" v-else>
				还未绑定银行卡
				<a @click="addBank">去添加</a>
			</li>
		</ul>
		<div class="with-item">
			<h3>提现金额</h3>
			<van-field v-model="amount" type="digit" placeholder="请输入" />
			<p>可用佣金 {{ $route.query.mayWithdrawAmt || 0 }}元</p>
		</div>
		<a @click="savePaly"><van-btn text="确定提现" type="1" /></a>
	</div>
</template>

<script>
import { withdrawApply, getBankInfo } from '@/api/';
import vanBtn from '../../common/vanBtn';
export default {
	components: {
		vanBtn
	},
	data() {
		return {
			amount: '',
			listArr: '',
			isView: false
		};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			getBankInfo({})
				.then(res => {
					this.$toast.clear();
					if (res.code === 200 && res.data.length) {
						this.listArr = res.data[0];
						this.isView = true;
					} else {
						this.isView = false;
					}
				})
				.catch(msg => {
				});
		},
		addBank() {
			this.$router.push({ path: `/BankCard`, query: { mayWithdrawAmt: this.$route.query.mayWithdrawAmt } });
		},
		savePaly() {
			if (!this.amount) {
				this.toast('请输入提现金额');
				return;
			} else if (this.amount < 100) {
				this.toast('提现金额不能小于100');
				return;
			}else if (this.amount > this.$route.query.mayWithdrawAmt) {
				this.toast(`提现额度已经超过可用额度`);
				return;
			}
			if(!this.listArr){
				this.toast('还没有绑定银行卡');
				return;
			}
			withdrawApply({
				amount: this.amount,
				cardId: this.listArr.id
			})
				.then(res => {
					if (res.code === 200) {
						this.toast('提现成功');
						//回个人中心
						setTimeout(()=> {
							this.$router.go(-1)
						}, 1200);
					} else {
						this.toast(res.msg);
					}
				})
				.catch(msg => {
				});
		},
		viewCard(t) {
			if (!t) return '';
			return '**** **** **** ' + t.substring(t.length - 4, t.length)
		}
	}
};
</script>

<style lang="less" scoped>
.with-main {
	background: #f5f5f5;
	height: 100vh;
	padding-top: 4%;
	> ul {
		background: #fff;
		margin-bottom: 4%;
		> li {
			padding: 3% 4%;
			&.act {
				padding: 5% 4%;
				position: relative;
				color: #999;
				font-size: 26px;
				> a {
					position: absolute;
					height: 60px;
					line-height: 60px;
					right: 4%;
					top: 50%;
					margin-top: -30px;
					padding: 0 4%;
					font-size: 24px;
					color: #fff;
					border-radius: 40px;
					display: inline-block;
					background: linear-gradient(to right, #fad27d, #f98a42);
				}
			}
			> h2 {
				font-weight: 500;
				font-size: 30px;
				margin-bottom: 10px;
			}
			> h3 {
				font-size: 27px;
			}
		}
	}
	.with-item {
		padding: 4%;
		background: #fff;
		> h3 {
			font-weight: 500;
			font-size: 30px;
		}
		.van-cell {
			padding: 8% 0 4% 0;
		}
		> p {
			color: #999;
			font-size: 24px;
			padding-top: 4%;
		}
	}
	> a {
		display: block;
		margin: 10% 4%;
	}
}
</style>
<style>
.with-item .van-cell .van-field__control {
	font-size: 0.5rem;
	font-weight: 600;
}
</style>
